<template>
  <ConfigProvider
    :theme="{
      components: {
        Tabs: {
          lineWidth: 0,
        },
        Input: borderStyle,
        Select: borderStyle,
        InputNumber: borderStyle,
      },
    }"
  >
    <Tabs
      v-model:activeKey="activeKey"
      tab-position="left"
      destroyInactiveTabPane
    >
      <template #renderTabBar>
        <div class="tab-collapse">
          <Space direction="vertical" class="ant-collapse-item">
            <Button
              v-for="button in panes"
              :key="`button${button.key}`"
              type="text"
              block
              :class="{ active: activeKey == button.key }"
              @click="activeKey = button.key"
              >{{ button.title }}</Button
            >
          </Space>
        </div>
      </template>

      <TabPane v-for="pane in panes" :key="pane.key" :tab="pane.title">
        <component
          :is="pane.content"
          :pageData="form"
          :realTimeData="realTimeData"
          :formData="installFormData"
          @change="onChange"
        />
      </TabPane>
    </Tabs>
  </ConfigProvider>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import Base from '@/views/devices/allDevice/components/DetailTab/Base.vue';
import Battery from '@/views/devices/allDevice/components/DetailTab/Battery.vue';
import Device from '@/views/devices/allDevice/components/DetailTab/Device.vue';
import Install from '@/views/devices/allDevice/components/DetailTab/Install.vue';
import Network from '@/views/devices/allDevice/components/DetailTab/Network.vue';
import Sensor from '@/views/devices/allDevice/components/DetailTab/Sensor.vue';
import Server from '@/views/devices/allDevice/components/DetailTab/Server.vue';
import { Button, ConfigProvider, Space, TabPane, Tabs } from 'ant-design-vue';
import { borderStyle } from '@/constant/theme';
import {
  getDevice,
  getDeviceRealTimeData,
  getInstallationDetail,
  getModel,
} from '@/api/device';
import { getProjectTree } from '@/api/push';

defineOptions({
  name: 'DeviceTabs',
});
const emit = defineEmits(['change']);
interface Props {
  pageData: any;
}
const props = defineProps<Props>();
const form = ref({});
const realTimeData = ref({});
// 传感器信息展示
const desktopTerminal = computed(() => props.pageData.deviceType !== '3');

// 安装详情展示
const modList = ref([]);
const projectList = ref([]);
const isShow = ref(false);
const installFormData = ref({});

// 获取设备信息
const getConfig = async () => {
  const modelRes: any = await getModel();
  modList.value = modelRes.data;

  const res: any = await getProjectTree();

  const res1: any = await getInstallationDetail({
    code: props.pageData.code,
  });
  if (res.code == 200) {
    projectList.value = res.data;
  }
  if (res1.code == 200) {
    if (res1.data.id != null) {
      isShow.value = true;
      installFormData.value = res1.data;
      form.value.installAddress = res1.data.siteName
        ? res1.data.siteName
        : form.value.installAddress;
      const host = window.location.host.replace(/^wdm/, 'ers');
      for (let i = 1; i < 11; i++) {
        if (installFormData.value['thumbnail' + i + 'HdfsName']) {
          installFormData.value['thumbnail' + i] =
            `${window.location.protocol == 'https:' ? 'https' : 'http'}://${host}/uploadPath${decodeURIComponent(installFormData.value['thumbnail' + i + 'HdfsName'])}`;
        }
      }
    } else {
      isShow.value = false;
    }
  }
};
getConfig();

const panes: any = computed(() =>
  [
    {
      title: '基本信息',
      key: 'base',
      show: true,
      content: Base,
    },
    {
      title: '服务信息',
      key: 'serve',
      show: true,
      content: Server,
    },
    {
      title: '网络信息',
      key: 'network',
      show: true,
      content: Network,
    },
    {
      title: '设备性能',
      key: 'device',
      show: true,
      content: Device,
    },
    {
      title: '传感器信息',
      key: 'sensor',
      show: desktopTerminal.value,
      content: Sensor,
    },
    {
      title: '电池信息',
      key: 'battery',
      show: true,
      content: Battery,
    },
    {
      title: '安装详情',
      key: 'install',
      show: installFormData.value,
      content: Install,
    },
  ].filter((Item) => Item.show),
);
const activeKey = ref(panes.value[0].key);
const res: any = await getDevice(props.pageData.deviceId);
console.log(res, 'ressss');

form.value = { ...props.pageData, ...res.data };
getDeviceRealTimeData(props.pageData.deviceId).then((res) => {
  realTimeData.value = res.data || {};
});
const onChange = () => {
  emit('change');
};
</script>
<style lang="scss" scoped>
.ant-tabs {
  height: 60vh;
}

:deep(.ant-tabs-nav) {
  width: fit-content;
}

:deep(.ant-tabs-nav-wrap) {
  margin-top: 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
  padding: 4px;
}

:deep(h5) {
  width: 100%;
  font-size: 16px;
  margin: 0px 20px 20px 0px;
  padding-bottom: 5px;
  border-bottom: 1px outset;
}

:deep(.tips) {
  width: 100%;
  margin: 20px;
  &::before {
    display: inline-block;
    margin-inline-end: 4px;
    color: #ff4d4f;
    content: '*';
  }
}
:deep(.pro-form-modal) {
  h5 {
    margin-left: 20px;
  }
  max-height: 63vh;
  overflow-y: auto;
  margin-right: -24px;
  padding-right: 24px;
}
:deep(.footer-buttons) {
  position: absolute;
  bottom: -35px;
  right: 0;
}

:deep(.row-data) {
  margin: 15px 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--custom-row-data);
}
.ant-collapse-item {
  padding-left: 16px;
}
</style>
